<template>
  <view class="read-item flex" :class="[Number(data?.status) === 4 ? 'item-ing' : Number(data?.status) === 0 ? 'item-start' : Number(data?.status) === 6 ? 'item-finish' : 'item-abnormal']">
    <image class="read-img" :src="data?.bookImg" mode="aspectFill" />

    <view class="read-right flex-1">
      <text class="title">
        {{ data?.bookName }}
      </text>
      <view class="tag-group">
        <text v-if="data?.bookAge" class="tag tag-1">
          {{ infoStore.getText(data?.bookAge) }}
        </text>
        <text v-if="data?.bookTheme" class="tag tag-2">
          {{ infoStore.getText(data?.bookTheme) }}
        </text>
        <text v-if="data?.bookCategory" class="tag tag-3">
          {{ infoStore.getText(data?.bookCategory) }}
        </text>
      </view>
      <view class="progress-box flex items-center">
        <up-line-progress :percentage="data?.readRate * 100" height="8" :show-text="false" inactive-color="#EDECEC" />
        <view class="progress-info">
          {{ `${data?.readRate * 100}%` }}
        </view>
      </view>
      <view class="btn-group flex justify-between">
        <template v-if="[4, 5, 6].includes(Number(data?.status))">
          <view class="btn-default flex items-center justify-center" @click="toAnswer">
            <text class="btn-text">
              阅读打卡
            </text>
            <u-icon name="arrow-rightward" :size="12" color="" />
          </view>

          <view class="btn flex items-center justify-center" @click="toUpload">
            <text class="btn-text">
              上传作业
            </text>
            <up-icon name="arrow-rightward" :size="12" color="" />
          </view>
        </template>

        <view v-if="Number(data?.status) === 0" class="btn-default flex items-center justify-center" @click="toPreview">
          <text class="btn-text">
            课前预习
          </text>
          <u-icon name="arrow-rightward" :size="12" color="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="ReadItem">
import { useInfoStore } from '@/store';
import { getPreview } from '@/api/read';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const infoStore = useInfoStore();

const toAnswer = () => {
  uni.navigateTo({
    url: `/pages/views/game/index?courseId=${props.data.courseId}&bookName=${props.data.bookName}&acsId=${props.data.id}`,
  });
};

const toUpload = () => {
  uni.navigateTo({
    url: `/pages/views/answer/upload?acsId=${props.data.courseId}`,
  });
};

const toPreview = () => {
  getPreview({ id: props.data.id });
  uni.navigateTo({
    url: `/pages/views/preview/index?url=${props.data.vidoUrl}`,
  });
};
</script>

<style lang="scss" scoped>
.read-item {
  width: 100%;
  height: 332rpx;
  padding: 28rpx 32rpx 40rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;

  .read-img {
    width: 176rpx;
    height: 252rpx;
    border-radius: 12rpx;
  }

  .read-right {
    padding: 24rpx 0 0 24rpx;

    .title {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: #333;
    }

    .tag-group {
      padding: 10rpx 0;

      .tag {
        padding: 0 8rpx;
        font-size: 24rpx;
        line-height: 42rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }

      .tag-1 {
        background: rgba(152, 237, 209, 0.3);
        color: #00BF7F;
      }

      .tag-2 {
        background: #EBF1FF;
        color: #7292CF;
      }

      .tag-3 {
        background: #F5F6F9;
        color: #888888;
      }
    }

    .progress-box {
      padding-top: 6rpx;

      .progress-info {
        font-size: 20rpx;
        line-height: 28rpx;
        padding-left: 16rpx;
        color: #888888;
      }
    }

    .btn-group {
      padding-top: 30rpx;

      .btn-default {
        width: 200rpx;
        height: 56rpx;
        background: #4AAAF8;
        border-radius: 28rpx;
        color: #fff;

        .btn-text {
          padding-right: 8rpx;
          font-size: 28rpx;
        }
      }

      .btn {
        width: 200rpx;
        height: 56rpx;
        border-radius: 28rpx;
        border: 2rpx solid #4AAAF8;
        color: #4AAAF8;

        .btn-text {
          padding-right: 8rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}

.item-ing {
  box-shadow: inset 0rpx 12rpx 0rpx 0rpx #4AAAF8;
}

.item-start {
  box-shadow: inset 0rpx 12rpx 0rpx 0rpx #75E080;
}

.item-finish {
  box-shadow: inset 0rpx 12rpx 0rpx 0rpx #E6E6E6;
}

.item-abnormal {
  box-shadow: inset 0rpx 12rpx 0rpx 0rpx #FFD061;
}
</style>
